<template>
  <div>
    <search-bar />
    <div class="back" @click="back()">
      <i class="iconfont icon-lujing"></i>
      返回
    </div>
    <div class="content">
      <div class="title">
        <div class="name">Lorem ipsum dolor sit amet, consectetur</div>
        <div class="tag">RcsChat App</div>
      </div>
      <div class="userinfo">
        <div class="avatar">
          <img src="@/assets/img/avatar.jpg" alt="" />
          <span class="username">asdasd</span>
        </div>
        <div class="time">
          <i class="iconfont icon-shijian"></i>
          <span>2020-12-02 14:20</span>
        </div>
      </div>
      <div class="article">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo in
          imperdiet amet, fringilla feugiat. Semper habitant pretium, felis
          velit massa tristique mattis. At ultrices et feugiat at. Elit nibh
          nisi, accumsan a orci liberoAt ultrices et feugiat at. Elit nibh nisi.
        </p>
        <img src="@/assets/img/avatar.jpg" alt="" />
      </div>
      <div class="addcomment">
        <div class="addbutton" @click="showEditor = !showEditor">添加评论</div>
        <div class="like">
          <i class="iconfont icon-zan"></i>
          <span>赞 23</span>
        </div>
      </div>
      <div class="editorcomment" v-show="showEditor">
        <quill-editor
          ref="myTextEditor"
          v-model="content"
          :options="editorOption"
          style="height: 400px"
        ></quill-editor>
      </div>
      <div class="floor">
        <div class="header">全部评论（3）</div>
        <div class="commentlist">
          <div class="nocomment" style="display: none">
            <img src="@/assets/img/dev_nocomments@2x.png" alt="" />
            <div class="nocomment-text">
              <div class="nocomment-text-left">暂无评论</div>
              <div class="nocomment-text-right">我要评论</div>
            </div>
          </div>
          <div class="item-comment">
            <div class="item">
              <div class="item-header">
                <div class="avatar">
                  <img src="@/assets/img/avatar.jpg" alt="" />
                  <span class="username">asdasd</span>
                </div>
                <div class="time">
                  <span>2020-12-02 14:20</span>
                </div>
              </div>
              <div class="item-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo
                in imperdiet amet.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import Search from "@/components/Search";

// import Vue from 'vue'
// import BhComments from '@/components/BhComments'
// import CommentService from '@/request/comments/comment'
// import ReplyService from '@/request/comments/reply'

// Vue.use(BhComments)

export default {
  name: "art",
  components: {
    SearchBar: Search,
    quillEditor,
  },
  data() {
    return {
      showEditor: false,
      content: "",
      editorOption: {
        placeholder: "编辑文章内容",
      },
    };
  },
  mounted() {
    console.log(this.$route.params.id);
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    onEditorChange({ editor, html, text }) {
      console.log(editor, text);
      this.content = html;
    },
  },
};
</script>

<style lang="less" scoped>
.back {
  width: 1107px;
  margin: 15px auto;
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  color: #303133;
  cursor: pointer;
  i {
    font-size: 14px;
    margin-right: 5px;
  }
}
.content {
  width: 967px;
  height: 2000px;
  margin: 0px auto 50px auto;
  background: #ffffff;
  box-shadow: 0px 0px 7px 0px #dfe1e7;
  border-radius: 4px;
  padding: 30px 70px;
  .title {
    position: relative;
    margin-bottom: 15px;
    .name {
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #303133;
      line-height: 28px;
      letter-spacing: 1px;
    }
    .tag {
      position: absolute;
      top: 0;
      right: 0;
      width: 89px;
      background: #fdfeff;
      border-radius: 3px;
      border: 1px solid #d2d7e1;
      padding: 0px 9px;
      height: 25px;
      font-size: 11px;
      line-height: 25px;
      text-align: center;
    }
  }
  .userinfo {
    position: relative;
    margin-bottom: 20px;
    > div {
      display: inline-block;
      margin-right: 15px;
    }
    .avatar {
      > img {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        vertical-align: bottom;
        margin-right: 9px;
      }
      .username {
        font-size: 16px;
        font-weight: 400;
        color: #303133;
        line-height: 22px;
        letter-spacing: 1px;
      }
    }
    .time {
      color: #727786;
      font-size: 12px;
      > i {
        margin-right: 5px;
        cursor: pointer;
        vertical-align: baseline;
      }
      span {
        display: inline-block;
        line-height: 22px;
      }
    }
  }
  .article {
    margin-bottom: 30px;
  }
  .addcomment {
    height: 60px;
    background: #fdfeff;
    border: 1px solid #d2d7e1;
    position: relative;
    // margin-bottom: 30px; // 这个可能需要
    .addbutton {
      display: inline-block;
      margin: 10px 30px 10px 16px;
      padding: 10px;
      text-align: center;
      color: #ffffff;
      width: 96px;
      height: 20px;
      background: #3f94ff;
      border-radius: 4px;
      cursor: pointer;
    }
    .like {
      display: inline-block;

      color: #727786;
      font-size: 12px;
      > i {
        margin-right: 5px;
        cursor: pointer;
        vertical-align: middle;
      }
      span {
        display: inline-block;
        line-height: 22px;
      }
    }
  }
  .editorcomment {
    margin-bottom: 96px;
  }
  .floor {
    margin-top: 30px;
    .header {
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #303133;
      line-height: 22px;
    }
    .commentlist {
      .nocomment {
        text-align: center;
        img {
          width: 150px;
          margin-bottom: 20px;
        }
        .nocomment-text {
          width: 150px;
          margin: 0 auto;
          display: flex; /* 弹性布局 */
          justify-content: center;
          > div {
            width: 50%;
          }
          .nocomment-text-left {
            color: #606266;
          }
          .nocomment-text-right {
            cursor: pointer;
            color: #3f94ff;
          }
        }
      }
      .item-comment {
        margin-top: 15px;
        .item {
          .item-header {
						position: relative;
						margin-bottom:15px;
            .avatar {
              > img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                vertical-align: bottom;
                margin-right: 9px;
              }
              .username {
                font-size: 16px;
                font-weight: 400;
                color: #0055d6;
                line-height: 35px;
                letter-spacing: 1px;
              }
            }
            .time {
              position: absolute;
              line-height: 35px;
              top: 0;
              right: 0;
            }
          }
          .item-content {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #303133;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>